<template>
	<div class="personal layout-pd">
		<el-row>
			<!-- 个人信息 -->
			<el-col :xs="10" :sm="160">
				
				<el-card shadow="hover" header="景点信息">
					
					<div class="personal-user">
						
						<div class="personal-user-left">
							<el-upload class="h100 personal-user-left-upload" action="https://jsonplaceholder.typicode.com/posts/" multiple :limit="1">
								<img class="user-avatar" src="https://img2.baidu.com/it/u=1978192862,2048448374&fm=253&fmt=auto&app=138&f=JPEG?w=504&h=500" />
							
							</el-upload>
							
						</div>
						
						<div class="personal-user-right">
						
									<!-- 新增的发布项目按钮所在列 -->
										<el-button v-if="!newProduct.name" type="primary" @click="openUploadDialog">发布项目</el-button>
										<el-button v-else type="primary" @click="openUploadDialog">修改项目</el-button>
							<el-row>
							

								<el-col :span="24">
									
									<el-row>
										
										<el-col :span="10"
											><div class="grid-content ep-bg-purple"></div>
											<el-col :xs="24" :sm="20" class="personal-item mb6">
												<div class="personal-item-label">景点名称：</div>
												<div class="personal-item-value">{{ newProduct.name }}</div>
											</el-col>
											<el-col :xs="24" :sm="20" class="personal-item mb6">
												<div class="personal-item-label">特色介绍：</div>
												<div v-if="newProduct.name.length > 20" class="feature-content">
													{{ newProduct.feature.substring(0, 20) }}<br />{{ newProduct.feature.substring(20) }}
												</div>
												<div v-else class="feature-content">{{ newProduct.feature }}</div>
											</el-col>
											<el-col :xs="24" :sm="16" class="personal-item mb6">
												<div class="personal-item-label">历史背景:&nbsp;</div>
												<div v-if="newProduct.name.length > 20" class="history-content">
													{{ newProduct.historyBackground.substring(0, 20) }}<br />{{ newProduct.historyBackground.substring(20) }}
												</div>
												<div v-else class="history-content">{{ newProduct.historyBackground }}</div>
											</el-col>
											<el-col :xs="24" :sm="16" class="personal-item mb6">
												<div class="personal-item-label">开始时间：</div>
												<div class="personal-item-value">{{ newProduct.openTime }}</div>
											</el-col>
											<el-col :xs="24" :sm="16" class="personal-item mb6">
												<div class="personal-item-label">结束时间：</div>
												<div class="personal-item-value">{{ newProduct.endTime }}</div>
											</el-col>
										</el-col>
										<el-col :span="12"
											><div class="grid-content ep-bg-purple-light"></div>

											<el-col :xs="24" :sm="16" class="personal-item mb6">
												<div class="personal-item-label">地址：</div>
												<div class="personal-item-value">{{ newProduct.address }}</div>
											</el-col>
											<el-col :xs="24" :sm="16" class="personal-item mb6">
												<div class="personal-item-label">门票种类：</div>
												<div class="personal-item-value" v-if="newProduct.tourType === 1">亲子游</div>
												<div class="personal-item-value" v-else-if="newProduct.tourType === 2">情侣游</div>
												<div class="personal-item-value" v-else-if="newProduct.tourType === 3">朋友游</div>
												<div class="personal-item-value" v-else>{{ newProduct.tourType }}</div>
											</el-col>
											<el-col :xs="24" :sm="16" class="personal-item mb6">
												<div class="personal-item-label">门票数量：</div>
												<div class="personal-item-value">{{ newProduct.number }}</div>
											</el-col>
											<el-col :xs="24" :sm="16" class="personal-item mb6">
												<div class="personal-item-label">价格：</div>
												<div class="personal-item-value">{{ newProduct.price }}</div>
											</el-col>
											<el-col :xs="24" :sm="16" class="personal-item mb6">
												<div class="personal-item-label">门票折扣：</div>
												<div class="personal-item-value">{{ newProduct.discount }}</div>
											</el-col>
										</el-col>
									</el-row>
								</el-col>
							</el-row>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<el-col :xs="24" :sm="24">
			<el-card shadow="hover" header="景点照片">
				<div class="upload-button-container"></div>

				<el-upload
					v-model:file-list="fileList"
					action="http://localhost:8080/merchant/image/upload"
					list-type="picture-card"
					:on-preview="handlePictureCardPreview"
					:on-remove="handleRemove"
					:on-success="handleSuccess"
					:headers="customHeaders"
				>
					<el-icon><Plus /></el-icon>
				</el-upload>

				<el-dialog v-for="item in fileList" :key="item">
					<img w-full :src="item.url" />
				</el-dialog>
			</el-card>
		</el-col>
		<el-col :xs="24" :sm="24">
			<el-card shadow="hover" header="景点视频">
		<el-upload
			ref="upload"
			class="upload-demo"
			action="http://localhost:8080/merchant/image/upload"
			:limit="1"
			:on-success="handshangba"
			:on-exceed="handleExceed"
			:headers="customHeaders"
			:auto-upload="false"
		>
			<template #trigger>
				<el-button type="primary" class="custom-upload-button">选择视频</el-button>
			</template>
			<el-button class="ml-3 custom-confirm-button" type="success" @click="submitUpload">确认上传</el-button>
			<!-- <template #tip>
				<div class="el-upload__tip text-red">limit 1 file, new file will cover the old fil</div>
			</template> -->
		</el-upload>

		<
		<div>
			<!-- 这里设置成了静音、自动播放 -->
			<video autoplay muted class="video" :src="newProduct.voideo" :width="videoWidth" :height="videoHeight"></video>
		</div>
	</el-card>
</el-col>

		<el-dialog v-model="dialogProductFormVisible">
			<div class="personal layout-pd">
				<el-row>
					<!-- 发布项目 -->
					<el-col :xs="24" :sm="24">
						<!-- 修改此处，将宽度设为原来的二分之一 -->
						<el-card shadow="hover" class="mt15" header="我的景点">
							<el-form :model="newProduct" ref="productForm">
								<el-form-item label="景点名称" prop="name" :rules="[{ required: true, message: '请输入景点名称', trigger: 'blur' }]">
									<el-input v-model="newProduct.name"></el-input>
								</el-form-item>
								<el-form-item label="特色介绍" prop="features">
									<el-input v-model="newProduct.feature" type="textarea"></el-input>
								</el-form-item>
								<el-form-item label="历史背景" prop="history">
									<el-input v-model="newProduct.historyBackground" type="textarea"></el-input>
								</el-form-item>
								<el-form-item label="开放时间" prop="openTime">
									<el-date-picker v-model="newProduct.openTime" type="datetime" @change="beginTimeChange"></el-date-picker>
								</el-form-item>
								<el-form-item label="结束时间" prop="openTime">
									<el-date-picker v-model="newProduct.endTime" type="datetime" @change="overtimeChange"></el-date-picker>
								</el-form-item>
								<el-form-item label="地址" prop="address">
									<el-input v-model.number="newProduct.address"></el-input>
								</el-form-item>
								<el-form-item label="门票种类" prop="ticketType">
									<el-select v-model="newProduct.tourType">
										<el-option label="亲子游" value="1"></el-option>
										<el-option label="情侣游" value="2"></el-option>
										<el-option label="朋友游" value="3"></el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="门票数量" prop="ticketQuantity">
									<el-input v-model.number="newProduct.number"></el-input>
								</el-form-item>
								<el-form-item label="价格" prop="price">
									<el-input v-model.number="newProduct.price"></el-input>
								</el-form-item>
								<el-form-item label="门票折扣" prop="discount">
									<el-input v-model.number="newProduct.discount"></el-input>
								</el-form-item>
								<el-form-item>
									<el-button type="primary" @click="updates()">确定</el-button>
									<el-button type="danger" @click="cancelProduct">取消</el-button>
								</el-form-item>
							</el-form>
						</el-card>
					</el-col>
				</el-row>
			</div>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="personal">
import {  reactive,  onMounted, ref } from 'vue';
import { Plus } from '@element-plus/icons-vue';
import type { UploadProps, UploadRawFile, ElForm, UploadInstance } from 'element-plus';
import { tourtableapi } from '/@/api/Tourtable/api';
import { ElMessage, genFileId } from 'element-plus'; // 导入ElMessage

// 18382718894

const videoWidth = ref('40%'); // 初始宽度为父容器的50%，可根据需求调整
const videoHeight = ref('auto'); // 高度自适应


//视频
const upload = ref<UploadInstance>();

//清楚选择文件，
const handleExceed: UploadProps['onExceed'] = (files) => {
	upload.value!.clearFiles();
	const file = files[0] as UploadRawFile;
	file.uid = genFileId();
	upload.value!.handleStart(file);
};
//出发上传功能
const submitUpload = () => {

	
	upload.value!.submit();
};

//上传视频
const handshangba = async (res: any, file: any) => {
	
	tourtableapi()
		.addvoideo({ voido: res.data })
		.then(() => {});
		gettour();

	if (res.code == 500) {
		ElMessage.error(res.msg);
	} else {
		// newProduct.videos.push(res.data);
		ElMessage.success(`上传成功`);
	}

};




const fileList = reactive([
	{
		id: 0,
		url: '',
	},
]);

const dialogImageUrl = ref('');
const dialogVisible = ref(false);
const dialogProductFormVisible = ref(false);

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles ) => {
	deleteimg({ id: uploadFile.id });
};

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
	dialogImageUrl.value = uploadFile.url!;
	dialogVisible.value = true;
};

let tes = JSON.parse(localStorage.getItem('user') || '{}');
const customHeaders = reactive({
	token: tes.data,
});

const newProduct = reactive({
	feature: '',
	historyBackground: '',
	// month: '',
	openTime: "",
	endTime: "",
	price: null,
	address: '',
	name: '',
	tourType: null,
	number: null,
	discount: 1,
	voideo: '',
	isPlaying: false,
});

//删除
const deleteimg = (row: any) => {
	tourtableapi()
		.deleteimg({ id: row.id })
		.then(() => {});
	getimgs();
};

// 上传成功后的处理
const handleSuccess = async (res: any, file: any) => {
	tourtableapi()
		.addimage({ image: res.data })
		.then((res) => {
			getimgs();
		});

	if (res.code == 500) {
		ElMessage.error(res.msg);
	} else {
		// newProduct.videos.push(res.data);
		ElMessage.success(`上传成功`);
	}
};

// 处理上传错误
const handleUploadError = (err, file, fileList) => {
	ElMessage.error(`图片上传失败: ${err.message}`);
};

//开始时间转化
const beginTimeChange = (val: any) => {
	const date = new Date(val);
	newProduct.openTime = time(date);
};
//结束时间转化
const overtimeChange = (val: any) => {
	const date = new Date(val);
	newProduct.endTime = time(date);
};

//格式化时间
const time = (val: any) => {
	const year = val.getFullYear();
	const month = String(val.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需加1
	const day = String(val.getDate()).padStart(2, '0');
	const hours = String(val.getHours()).padStart(2, '0');
	const minutes = String(val.getMinutes()).padStart(2, '0');
	const seconds = String(val.getSeconds()).padStart(2, '0');
	return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};

const openUploadDialog = () => {
	if (!newProduct.name==null) {
			// 初始化表单数据
			newProduct.name = '';
		newProduct.feature = '';
		newProduct.historyBackground = '';
		newProduct.openTime = "";
		newProduct.endTime = "";
		newProduct.tourType = null;
		newProduct.number = null;
		newProduct.price = null;
		newProduct.discount = 1;
	} 
	dialogProductFormVisible.value = true;
};

// 获取所有图片
// 获取所有图片
const getimgs = async () => {
	try {
		const res = await tourtableapi().imgselect();
		fileList[0].url = res.data[0].photograph;
		fileList[0].id = res.data[0].id;
		for (let i = 1; i < res.data.length; i++) {
			fileList.push({ id: res.data[i].id, url: res.data[i].photograph });
		}
	} catch (error) {
		ElMessage.error('获取图片失败');
	}
};

//查询
const gettour = async () => {
	try {
		// console.log('Sending request to:', 'http://localhost:8080/merchant/tourtable/selectone');

		const res = await tourtableapi().selectone();

		newProduct.name = res.data.name;
		newProduct.feature = res.data.feature;
		newProduct.historyBackground = res.data.historyBackground;
		newProduct.openTime = res.data.openTime;
		newProduct.endTime = res.data.endTime;
		newProduct.tourType = res.data.tourType;
		newProduct.address = res.data.address;
		newProduct.number = res.data.number;
		newProduct.price = res.data.price;
		newProduct.discount = res.data.discount;
		newProduct.voideo = res.data.video;
	} catch (error) {


		ElMessage.error('获取项目信息失败');
	}

};

//修改
const updates = async () => {
	beginTimeChange(newProduct.openTime);
	overtimeChange(newProduct.endTime);
	try {
		tourtableapi()
			.unpdatetour(newProduct)
			.then(() => {
				gettour();
			});
	} catch (error) {
		ElMessage.error('更新失败');
	}
	await gettour(); // 重新获取数据
	dialogProductFormVisible.value = false;
};

const cancelProduct = () => {
	dialogProductFormVisible.value = false;
	// 这里可以添加重置newProduct对象的代码，例如：
	// 初始化表单数据
	newProduct.name = '';
	newProduct.feature = '';
	newProduct.historyBackground = '';
	newProduct.openTime = "";
	newProduct.endTime = "";
	newProduct.tourType = null;
	newProduct.number = null;
	newProduct.price = null;
	newProduct.discount = 1;
};

// 当前时间提示语
// const currentTime = computed(() => {
// 	return formatAxis(new Date());
// });

onMounted(() => {
	getimgs();
	gettour();
});
</script>

<style scoped lang="scss">
:deep(.el-dialog__body) {
	padding: 0;
}
.personal-video {
	width: 100%;
	max-width: 600px; // 可以根据实际需求调整最大宽度
	height: auto;
	border-radius: 3px;
	margin-top: 20px; // 根据实际布局调整上边距
}
:root {
	--primary-bg-color: #f4f4f4;
	--secondary-bg-color: #ffffff;
	--accent-color: #007bff;
	--text-muted-color: #777777;
}

body,
.personal {
	font-family: Arial, sans-serif;
	font-size: 14px;
}

@import '../../../theme/mixins/index.scss';
.personal {
	background-color: var(--primary-bg-color);
	padding: 20px;

	.personal-user {
		height: 300px;
		margin-bottom: 20px;
		display: flex;
		align-items: center;
		.user-avatar {
			width: 200px; // 根据需要调整宽度
			height: 20px; // 根据需要调整高度
			object-fit: cover; // 保持图片比例并填充空间
		}

		.personal-user-left {
			width: 200px; // 新的宽度值
			height: 200px; // 新的高度值
			border-radius: 3px;
			margin-right: 20px;

			:deep(.el-upload) {
				height: 100%;
			}

			.personal-user-left-upload {
				img {
					width: 100%;
					height: 100%;
					border-radius: 3px;
				}

				&:hover {
					img {
						animation: logoAnimation 0.5s cubic - bezier(0.25, 0.46, 0.45, 0.94);
					}
				}
			}
		}

		.personal-user-right {
			flex: 1;
			padding: 0 20px;
			.feature-content,
			.history-content {
				width: 200px; // 根据实际布局调整宽度
				word-break: break-word;
				font-size: 16px; // 添加字体大小设置
			}

			.personal-title {
				font-size: 20px;
				color: var(--accent-color);
				@include text-ellipsis(1);
			}

			.personal-item {
				display: flex;
				align-items: center;
				font-size: 13px;

				.personal-item-label {
					color: var(--text-muted-color);
					@include text-ellipsis(1);
					font-size: 20px;
				}

				.personal-item-value {
					@include text-ellipsis(1);
					font-size: 20px;
					white-space: normal; // 改为 normal 以允许自动换行
					word-wrap: break-word; // 允许单词内换行
				}
			}
		}
	}

	.personal-info {
		margin-bottom: 20px;
		padding: 20px;

		.personal-info-more {
			float: right;
			color: var(--text-muted-color);
			font-size: 13px;

			&:hover {
				color: var(--accent-color);
				cursor: pointer;
			}
		}

		.personal-info-box {
			height: auto;
			overflow: hidden;

			.personal-info-ul {
				list-style: none;

				.personal-info-li {
					font-size: 13px;
					padding-bottom: 10px;

					.personal-info-li-title {
						display: inline-block;
						@include text-ellipsis(1);
						color: var(--text-muted-color);
						text-decoration: none;
					}

					& a:hover {
						color: var(--accent-color);
						cursor: pointer;
					}
				}
			}
		}
	}

	.el-card {
		margin-bottom: 20px;
	}

	.el-table {
		border-collapse: collapse;

		th,
		td {
			border: 1px solid var(--el-border-color-light);
			padding: 10px;
		}
	}

	/* 新增样式 */
	.upload-demo {
		width: 100%;
		position: relative;
	}

	.broken-image,
	.uploaded-image {
		width: 100%;
		height: auto;
		border-radius: 3px;
	}
}

.avatar-uploader.el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.avatar-uploader.el-upload:hover {
	border-color: #409eff;
}

.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}

.avatar {
	width: 178px;
	height: 178px;
	display: block;
}

.upload-button-container {
	margin-bottom: 10px;
}
.el-row {
	margin-bottom: 20px;
}
.el-row:last-child {
	margin-bottom: 0;
}
.el-col {
	border-radius: 4px;
}

.grid-content {
	border-radius: 4px;
	min-height: 36px;
}

video::-webkit-media-controls-timeline {
	display: none;
}

.custom-upload-button {
	font-size: 18px; // 增大字体大小，使按钮文字更明显
	padding: 10px 20px; // 增加按钮的内边距，使其看起来更大
}

.custom-confirm-button {
	font-size: 18px;
	padding: 10px 20px;
}

.upload-demo {
	width: 100%;
	position: relative;
	display: flex;
	justify-content: flex-start; // 将按钮左对齐
	gap: 70px; // 设置按钮之间的间距为10像素，可根据需要调整
}
.button-col {
  height: 25px; // 调整按钮容器高度
  line-height: 25px;
  display: flex;
  align-items: flex-start; // 按钮顶部对齐

.custom-upload-button,
.custom-confirm-button {
    font-size: 14px;
    padding: 6px 12px;
    line-height: 20px; // 调整按钮文字垂直对齐
  }
}
</style>
